<template>
  <view class="publish-work flexc">
    <view class="content flex1 over">
      <view class="wrap">
        <view class="t">作品分类</view>
        <view class="box flex" @click="() => (show = true)">
          <input
            class="flex1"
            type="text"
            disabled
            placeholder="请选择作品分类" />
          <image
            src="@/static/image/arrow.png"
            mode="aspectFit"
            class="a"></image>
        </view>
        <view class="4">作品名称</view>
        <view class="box flex">
          <input class="flex1" type="text" placeholder="请填写作品名称" />
        </view>
        <view class="t">作品价格</view>
        <view class="box flex">
          <view class="p">￥</view>
          <input class="flex1" type="number" placeholder="请填写作品价格" />
        </view>
        <view class="t">作品头图</view>
        <view class="box1">
          <u-upload
            :fileList="fileList1"
            @afterRead="afterRead"
            @delete="deletePic"
            name="1"
            multiple
            :maxCount="1"></u-upload>
        </view>
        <view class="t">作品简介</view>
        <view class="box2">
          <view class="text">
            <u--textarea
              v-model="value1"
              border="none"
              count
              maxlength="100"
              placeholder="请填写作品简介"></u--textarea>
          </view>
          <view class="photo">
            <u-upload
              :fileList="fileList1"
              @afterRead="afterRead"
              @delete="deletePic"
              name="1"
              multiple
              :maxCount="9"></u-upload>
          </view>
        </view>
        <view class="t">作品名称</view>
        <view class="box flex">
          <input class="flex1" type="text" disabled placeholder="请上传作品" />
          <image class="b" src="@/static/image/up.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
    <view class="btn">
      <view class="" @click="goPage">
        {{ type == 2 ? "确认修改" : "立即发布" }}
      </view>
    </view>

    <u-picker
      :show="show"
      @cancel="() => (show = false)"
      @confirm="() => (show = false)"
      confirmColor="#F49C0D"
      :columns="columns"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      type: 1, //默认是上传，2是修改
      value1: "",
      show: false,
      columns: [["作品分类", "作品分类", "作品分类", "作品分类"]],
    };
  },
  onLoad(options) {
    this.type = options?.type || 1;
  },
  methods: {
    goPage() {
      this.toRoute({
        path: "/refund-submit-success",
        query: {
          type: this.type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.publish-work {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  .content {
    background: #f6f6f6;
    padding: 24upx 32upx;
    .wrap {
      background: #ffffff;
      border-radius: 24rpx 24rpx 24rpx 24rpx;

      box-sizing: border-box;
      padding: 34upx 24upx 40upx;
      .t {
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
        margin-bottom: 20upx;
      }
      .box {
        box-sizing: border-box;
        padding: 0 24upx;
        height: 64rpx;
        background: #f6f6f6;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 34upx;
        .a {
          width: 13rpx;
          height: 13rpx;
        }
        .p {
          width: 24rpx;
          height: 34rpx;
          font-size: 24rpx;
          color: #000000;
          margin-right: 16upx;
        }
        .b {
          width: 24rpx;
          height: 25rpx;
        }
      }
      .box1 {
        width: 202upx;
        height: 202upx;
        margin-bottom: 34upx;
      }
      .box2 {
        margin-bottom: 34upx;
        .photo {
          width: 202upx;
          height: 202upx;
        }
        .text {
          height: 208upx;
          width: 100%;
          border-radius: 4rpx 4rpx 4rpx 4rpx;
          margin-bottom: 16upx;
        }
      }
    }
  }
  /deep/ .u-popup {
    flex: 0 !important;
  }
  /deep/.u-textarea {
    padding: 0 !important;
  }
  /deep/.u-textarea__field {
    height: 208upx !important;
    background: #f6f6f6;
    padding-top: 22upx;
    text-indent: 2em;
  }
  /deep/.u-textarea__count {
    background: #f6f6f6 !important;
  }
  .btn {
    padding: 8upx 32upx;
    & > view {
      width: 686rpx;
      height: 80rpx;
      background: #f49c0d;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
